<template>
    <div class="app">
      <!--导航栏-->
      <div>
        <Header></Header>
      </div>

      <div class="main_content">
        <!--banner-->
        <div class="long_banner">
          <div class="long-rent-banner" style="background-image: url(&quot;//cars.zuchecdn.com/static/static-img/long-rent/banner.jpg&quot;);"></div>
        </div>

        <div class="long-rent-index ">
          <!--解决方案-->
          <div class="long-rent-container long-rent-plan">
            <div class="long-rent-content">
              <div class="container-title">提供全方位长期解决方案</div>
              <div class="flex-items">
                <div class="plan-item plan1">
                  <div class="plan-desc">
                    <div class="plan-desc-title">租期灵活</div>
                    <div class="plan-desc-detail">满足您的不同使用需求，90天-365天随意选择，租赁更随心</div>
                  </div>
                </div>
                <div class="plan-item plan2">
                  <div class="plan-desc">
                    <div class="plan-desc-title">超值优惠</div>
                    <div class="plan-desc-detail">长租价格更优惠，尊享分期支付，轻松租赁，使用更放心</div>
                  </div>
                </div>
                <div class="plan-item plan3">
                  <div class="plan-desc">
                    <div class="plan-desc-title">专属服务</div>
                    <div class="plan-desc-detail">为企业提供专属免押、资金管理、税务服务等多项尊享服务</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--我们的优势-->
          <div class="long-rent-container long-rent-adv">
            <div class="long-rent-content">
              <div class="container-title">我们的优势</div>
              <div class="flex-items">
                <div class="adv-item adv1">100+车型</div>
                <div class="adv-item adv2">千家网点</div>
                <div class="adv-item adv3">100%保障</div>
                <div class="adv-item adv4">无限里程</div>
              </div>
              <div class="button"> 立即订车</div>
            </div>
          </div>
        </div>


      </div>

      <!--footer-->
      <div>
        <Footer></Footer>
      </div>
    </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";
    export default {
      name: "Long",
      components:{
        Header,
        Footer
      }
    }
</script>

<style scoped>
  /*2*/
  .long-rent-index .long-rent-adv {
    background-color: #f5f5f5;
  }

  .long-rent-index .long-rent-container {
    padding-top: 60px;
    padding-bottom: 100px;
  }

  .long-rent-index .long-rent-adv .adv-item.adv1 {
    background-image: url(../assets/lo_1.png);
  }
  .long-rent-index .long-rent-adv .adv-item.adv2 {
    background-image: url(../assets/lo_2.png);
  }
  .long-rent-index .long-rent-adv .adv-item.adv3 {
    background-image: url(../assets/lo_3.png);
  }
  .long-rent-index .long-rent-adv .adv-item.adv4 {
    background-image: url(../assets/lo_4.png);
  }
  .long-rent-index .button {
    color: #171721;
    font-size: 30px;
    font-weight: 700;
    width: 250px;
    line-height: 70px;
    text-align: center;
    background-color: #ffc75d;
    border-radius: 4px;
    margin: 100px auto 0;
    cursor: pointer;
  }
  .long-rent-index .long-rent-adv .adv-item {
    width: 200px;
    padding-top: 245px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    text-align: center;
    font-size: 36px;
    color: #171721;
  }
  /*1*/
  .long-rent-index .long-rent-adv {
    background-color: #f5f5f5;
  }

  .long-rent-index .long-rent-container {
    padding-top: 60px;
    padding-bottom: 100px;
  }
  .long-rent-index .long-rent-container {
    padding-top: 60px;
    padding-bottom: 100px;
  }

  .long-rent-content {
    width: 1200px;
    margin: 0 auto;
  }

  .long-rent-index .long-rent-container .container-title {
    font-size: 32px;
    color: #171721;
    text-align: center;
    padding-bottom: 110px;
    letter-spacing: 5px;
  }

  .long-rent-index .flex-items {
    display: flex;
    justify-content: space-between;
  }

  .long-rent-index .long-rent-plan .plan-item.plan1 {
    background-image: url(../assets/t_1.png);
  }
  .long-rent-index .long-rent-plan .plan-item.plan2 {
    background-image: url(../assets/t_2.png);
  }
  .long-rent-index .long-rent-plan .plan-item.plan3 {
    background-image: url(../assets/t_3.png);
  }
  .long-rent-index .long-rent-plan .plan-item {
    width: 390px;
    height: 538px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 15px;
    overflow: hidden;
  }

  .long-rent-index .long-rent-plan .plan-item .plan-desc {
    padding: 30px 45px 12px;
    text-align: center;
    color: #78472c;
    /*background: rgba(255,202,111,.9);*/
    background: linear-gradient(
      180deg,#ffe1ad 0,rgba(255,202,111,.8));
  }

  .long-rent-index .long-rent-plan .plan-item .plan-desc-title {
    font-size: 40px;
  }

  .long-rent-index .long-rent-plan .plan-item .plan-desc-detail {
    font-size: 26px;
    line-height: 1.3;
  }
  .long-rent-index .long-rent-plan .plan-item {
    width: 390px;
    height: 538px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 15px;
    overflow: hidden;
  }


  /*banner*/
  .long-rent-banner {
    height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
  }
</style>
